<template>
	<view>
		<!-- 消息列表页 -->
		<template v-if="list.length > 0">
			<block v-for="(item, index) in list" :key='index'>
				<msgList :item='item' :index='index'></msgList>
			</block>
		</template>
		<template v-else>
			<noThing></noThing>
		</template>
		<!-- 弹出层 -->
		<uni-popup ref='popup' type="top">
			<view class="flex justify-center m-2 font-md align-center border-bottom py-2" hover-class="bg-light" @click="popupEvent('friend')">
				<text class="iconfont icon-sousuo font-md mr-2"></text>
				搜索好友
			</view>
			<view class="flex justify-center m-2 font-md align-center py-2" hover-class="bg-light" @click="popupEvent('clear')">
				<text class="iconfont icon-shanchu font-md mr-2"></text>
				清除缓存
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const demo = [{
			avatar: '/static/default.jpg',
			username: '帝莎编程',
			update_time: 1638881322,
			data: '消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容',
			noread: 20
		},
		{
			avatar: '/static/default.jpg',
			username: '帝莎编程',
			update_time: 1638881322,
			data: '消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容',
			noread: 10
		},
		{
			avatar: '/static/default.jpg',
			username: '帝莎编程',
			update_time: 1638881322,
			data: '消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容',
			noread: 10
		}
	];
	import msgList from '@/components/msg/msgList.vue';
	import noThing from '@/components/common/nothing.vue';
	// 引入弹出层组件
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	export default {
		components: {
			msgList,
			noThing,
			uniPopup
		},
		data() {
			return {
				list: []
			}
		},
		// 页面加载时
		onLoad() {
			this.list = demo
		},
		// 监听下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		// 监听点击原生导航栏按钮
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0:
					uni.navigateTo({
						url:'../userList/userList'
					})
					break;
				case 1:
					// 打开弹出层
					this.$refs.popup.open();
					break;
			}
		},
		methods: {
			popupEvent(e) {
				switch (e) {
					case 'friend':
						console.log('friend');
						uni.navigateTo({
							url:'../search/search?type=user'
						})
						break;
					case 'clear':
						console.log('clear');
						break;
				}
				// 关闭弹出层
				this.$refs.popup.close()
			},
			// 下拉刷新方法
			refresh() {
				setTimeout(() => {
					this.list = demo
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				}, 2000)
			}
		}
	}
</script>

<style>

</style>
